<template>
  <view class="publish-container">
    <!-- 内容输入区 -->
    <view class="content-input">
      <textarea
        v-model="content"
        placeholder="分享你的健康生活..."
        :maxlength="500"
        auto-height
      ></textarea>
      <text class="word-count">{{ content.length }}/500</text>
    </view>

    <!-- 图片上传区 -->
    <view class="image-upload">
      <view class="image-list">
        <view 
          class="image-item" 
          v-for="(image, index) in images" 
          :key="index"
        >
          <image :src="image" mode="aspectFill"></image>
          <text class="delete-btn" @tap.stop="deleteImage(index)">×</text>
        </view>
        <view 
          class="upload-btn" 
          v-if="images.length < 9"
          @tap="chooseImage"
        >
          <text class="icon">+</text>
          <text class="tip">{{ images.length }}/9</text>
        </view>
      </view>
    </view>

    <!-- 话题选择 -->
    <view class="topic-section">
      <view class="section-title">
        <text>添加话题</text>
        <text class="add-btn" @tap="showTopicPicker">{{ selectedTopic ? selectedTopic : '选择话题' }}</text>
      </view>
    </view>

    <!-- 位置信息 -->
    <view class="location-section">
      <view class="section-title">
        <text>所在位置</text>
        <text class="add-btn" @tap="chooseLocation">{{ location ? location : '添加位置' }}</text>
      </view>
    </view>

    <!-- 发布按钮 -->
    <view class="publish-btn" :class="{ disabled: !canPublish }" @tap="handlePublish">
      发布
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      images: [],
      selectedTopic: '',
      location: '',
      publishing: false
    }
  },

  computed: {
    canPublish() {
      return this.content.trim() || this.images.length > 0
    }
  },

  methods: {
    async chooseImage() {
      try {
        const res = await new Promise((resolve, reject) => {
          uni.chooseImage({
            count: 9 - this.images.length,
            sizeType: ['compressed'],
            sourceType: ['album', 'camera'],
            success: resolve,
            fail: reject
          })
        })

        if (res.tempFilePaths && res.tempFilePaths.length > 0) {
          // 显示上传进度
          uni.showLoading({
            title: '上传中...'
          })

          // 上传图片
          const uploadedImages = await Promise.all(
            res.tempFilePaths.map(path => this.uploadImage(path))
          )

          // 添加到图片列表
          this.images = [...this.images, ...uploadedImages]

          uni.hideLoading()
        }
      } catch (error) {
        console.error('选择图片失败:', error)
        uni.hideLoading()
        uni.showToast({
          title: '上传图片失败',
          icon: 'none'
        })
      }
    },

    async uploadImage(filePath) {
      // TODO: 替换为实际的图片上传API
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(filePath)
        }, 500)
      })
    },

    deleteImage(index) {
      this.images.splice(index, 1)
    },

    showTopicPicker() {
      // TODO: 实现话题选择器
      uni.showActionSheet({
        itemList: ['健康生活', '运动打卡', '饮食交流', '心理健康'],
        success: (res) => {
          this.selectedTopic = ['健康生活', '运动打卡', '饮食交流', '心理健康'][res.tapIndex]
        }
      })
    },

    async chooseLocation() {
      try {
        const res = await new Promise((resolve, reject) => {
          uni.chooseLocation({
            success: resolve,
            fail: reject
          })
        })

        if (res.name) {
          this.location = res.name
        }
      } catch (error) {
        console.error('选择位置失败:', error)
        uni.showToast({
          title: '选择位置失败',
          icon: 'none'
        })
      }
    },

    async handlePublish() {
      if (!this.canPublish || this.publishing) return

      this.publishing = true
      uni.showLoading({
        title: '发布中...'
      })

      try {
        const params = {
          content: this.content,
          images: this.images,
          topic: this.selectedTopic,
          location: this.location
        }

        // TODO: 替换为实际的发布API
        // await api.publishPost(params)

        uni.showToast({
          title: '发布成功',
          icon: 'success'
        })

        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        console.error('发布失败:', error)
        uni.showToast({
          title: '发布失败',
          icon: 'none'
        })
      } finally {
        this.publishing = false
        uni.hideLoading()
      }
    }
  }
}
</script>

<style lang="scss">
.publish-container {
  min-height: 100vh;
  background: #fff;
  padding: 30rpx;

  .content-input {
    position: relative;
    margin-bottom: 30rpx;
    
    textarea {
      width: 100%;
      min-height: 200rpx;
      font-size: 28rpx;
      line-height: 1.6;
      padding: 0;
    }
    
    .word-count {
      position: absolute;
      right: 0;
      bottom: 0;
      font-size: 24rpx;
      color: #999;
    }
  }

  .image-upload {
    margin-bottom: 30rpx;
    
    .image-list {
      display: flex;
      flex-wrap: wrap;
      
      .image-item {
        width: 220rpx;
        height: 220rpx;
        margin-right: 10rpx;
        margin-bottom: 10rpx;
        position: relative;
        
        &:nth-child(3n) {
          margin-right: 0;
        }
        
        image {
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
        }
        
        .delete-btn {
          position: absolute;
          top: -20rpx;
          right: -20rpx;
          width: 40rpx;
          height: 40rpx;
          line-height: 40rpx;
          text-align: center;
          background: rgba(0,0,0,0.5);
          color: #fff;
          border-radius: 50%;
          font-size: 32rpx;
        }
      }
      
      .upload-btn {
        width: 220rpx;
        height: 220rpx;
        background: #f5f5f5;
        border-radius: 8rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        .icon {
          font-size: 48rpx;
          color: #999;
          margin-bottom: 10rpx;
        }
        
        .tip {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }

  .topic-section,
  .location-section {
    margin-bottom: 30rpx;
    
    .section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
      
      text {
        font-size: 28rpx;
        color: #333;
      }
      
      .add-btn {
        color: #007AFF;
      }
    }
  }

  .publish-btn {
    margin-top: 60rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: #007AFF;
    color: #fff;
    border-radius: 44rpx;
    font-size: 32rpx;
    
    &.disabled {
      background: #ccc;
    }
  }
}
</style> 